<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html>
<html>
<head>
    <title>你是我的童话</title>	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="${pageContext.request.contextPath}/wx/media/css/bootstrap_login.min.css" rel="stylesheet" type="text/css"/>
   	<link href="${pageContext.request.contextPath}/wx/media/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<style>
	body{
		font-family: 'microsoft yahei',Arial,sans-serif;
		background-color: #222;
	}

	.redborder {
		border:2px solid #f96145;
		border-radius:2px;
	}

	.row {
		padding: 20px 0px;
	}

	.bigicon {
		font-size: 97px;
		color: #f08000;
	}

	.loginpanel {
		text-align: center;
		width: 300px;
		border-radius: 0.5rem;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 10px auto;
		background-color: #555;
		padding: 20px;
	}

	input {
		width: 100%;
		margin-bottom: 17px;
		padding: 15px;
		background-color: #ECF4F4;
		border-radius: 2px;
		border: none;
	}

	h2 {
		margin-bottom: 20px;
		font-weight: normal;
		color: #EFEFEF;
	}

	.btn {
		border-radius: 2px;
		padding: 10px;
	}

	.btn span {
		font-size: 27px;
		color: white;
	}

	.buttonwrapper{
		position:relative;
		overflow:hidden;
		height:50px;
	}

	.lockbutton {
		font-size: 27px;
		color: #f96145;
		padding: 10px;
		width:100%;
		position:absolute;
		top:0;
		left:0;
	}

	.loginbutton {
		background-color: #f08000;
		width: 100%;
		-webkit-border-top-right-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-topright: 0;
		-moz-border-radius-bottomright: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		left: -260px;
		position:absolute;
		top:0;
	}
	</style>
	<script src="${pageContext.request.contextPath}/wx/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/wx/media/js/bootstrap.min.js" type="text/javascript"></script>
	
	<link rel="shortcut icon" href="${pageContext.request.contextPath}/wx/media/image/favicon.ico" />
</head>
<body>

<!-- Interactive Login - START -->
<div class="container-fluid">
    <div class="row">
        <div class="loginpanel">
			<i id="loading" class="hidden fa fa-spinner fa-spin bigicon"></i>
            <h2>
				</span> 登录  </span>
			</h2>
            <div>
                <input id="userName" type="text" placeholder="登录账号" >
                <input id="userPw" type="password" placeholder="输入密码" onblur="check_values();">

				<div class="buttonwrapper">
					<button id="loginbtn" class="btn btn-warning loginbutton">
						<span class="fa fa-check"></span>
					</button>
					<span id="lockbtn" class="fa fa-lock lockbutton redborder"></span>
				</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
	$(document).keyup(function(event){
	  if(event.keyCode ==13){
	    $("#loginbtn").trigger("click");
	  }
	});

    function check_values() {
        if ($("#userName").val().length != 0 && $("#userPw").val().length != 0) {
            $("#loginbtn").animate({ left: '0' , duration: 'slow'});;
            $("#lockbtn").animate({ left: '260px' , duration: 'slow'});;
            return true;
        }else{
        	$('#showErrorAlert').removeClass('hidden');
        	$('#showErrorMessage').text("输入的登录帐号，密码不能为空!");
        	return false;
        }
    }

			
	$("#loginbtn").click(function(){
		if(check_values()){
			$('#loading').removeClass('hidden');
			//这里书写登录相关后台处理，例如: Ajax请求用户名和密码验证 kb
			var data = new Object();
	    		data['name'] = $("#userName").val();
	    		data['pwd'] = $("#userPw").val();
			    $.ajax({
			        url: "${pageContext.request.contextPath}/admin/login.do", // /api/leds/1
			        async: true,
			        dataType: 'json',
			        type: 'POST',
			        data: data,		
			        success: function(data , textStatus){
			        	if(data.result == "success"){
			        		window.location.href = "${pageContext.request.contextPath}/wx/main/index.jsp";
			        	}else{
				        	$('#showErrorAlert').removeClass('hidden');
				        	$('#showErrorMessage').text(data.message);
			        		//window.location.href = "${pageContext.request.contextPath}/wx/login.jsp";
			        	}
			        },		       
			        error: function(jqXHR , textStatus , errorThrown){
			        	window.location.href = "${pageContext.request.contextPath}/wx/login.jsp";
			        },
			       
			      });
			//window.location.href = "index.html";
		}
		
	});

</script>
<div class="portlet-body">
	<div class="alert">
	
		<div class="alert alert-error hidden" id="showErrorAlert">
	
			<button class="close" data-dismiss="alert"></button>
	
			<strong>Error!</strong> <p id="showErrorMessage">Error!</p>
	
		</div>
	</div>
</div>
<!-- Interactive Login - END -->
<div class="container-fluid">
	<div class="row footerbox">
		<div class="col-md-1"></div>
		<div class="col-md-10">
		<footer class="text-center">
			<i class="fa fa-external-link" style="color:#ffffff;">2013-2014 &copy; i1510 by bobolnear[AT]163.com</i>
		</footer>
		</div>
		<div class="col-md-1"></div>
	</div>
</div>

</body>
</html>